<template>
  <div>
    <a-row style="margin-bottom: 20px;">
      <a-col :span="24">
        <a-button type="primary" @click="uploadBtnClkFn">
          上传
        </a-button>
      </a-col>
    </a-row>

    <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange">
      <div v-if="fileList.length < 8">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          Upload
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal> -->

    <!-- upload-modal -->
    <a-modal title="上传图片" :visible="modalVisible" centered :confirm-loading="confirmLoading" @ok="modalHandleOk" @cancel="modalHandleCancel">
      <a-form-model :model="modalForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="上传附件">
          <a-upload :multiple="false" :action="get_OSS_config" :file-list="fileListOwn" :customRequest="uploadHandleChange">
            <a-button>
              上传图片
            </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="附近类型">
          <a-select v-model="modalForm.type" placeholder="请选择附件类型" @change="selectOnchange">
            <a-select-option v-for="(item, index) in attachType" :key="index" :value="item.key">
              {{item.val}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 图片展示 -->
    <a-upload list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange">
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import datas from '@/utils/data'
import { upLoadAliyun } from "@/utils/util"
import { attachmentGetUserIdApi } from '@/services/employeeManage'
import { attachmentAddOrUpdateflowersApi } from '@/services/employeeDetail'
import { get_OSS_config } from '@/services/api'

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: "tabs3",
  created () {
    this.getData()
  },
  props: {
    fileList: Array
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      // fileList: [
      //   {
      //     uid: '-1',
      //     name: 'image.png',
      //     status: 'done',
      //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      //   },
      //   {
      //     uid: '-2',
      //     name: 'image.png',
      //     status: 'done',
      //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      //   },
      //   {
      //     uid: '-3',
      //     name: 'image.png',
      //     status: 'done',
      //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      //   },
      //   {
      //     uid: '-4',
      //     name: 'image.png',
      //     status: 'done',
      //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      //   },
      //   {
      //     uid: '-5',
      //     name: 'image.png',
      //     status: 'error',
      //   },
      // ],
      // fileListOwn: [],
      modalVisible: false,
      confirmLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      modalForm: {
        type: ''
      },
      attachType: datas.attachType,
      get_OSS_config: get_OSS_config,
      imgOssPath: ''
    }
  },
  methods: {
    getData () {
      let params = {
        userId: 1
      }
      attachmentGetUserIdApi(params).then(res => {
        let { code, data } = res.data

        if (code == 200) {
          this.imgArr = data
          console.log(this.imgArr)
        }
      })
    },

    handleCancel () {
      this.previewVisible = false;
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange ({ fileList }) {
      this.fileList = fileList;
    },

    uploadBtnClkFn () {
      this.modalVisible = true;
    },

    modalHandleOk () {
      this.confirmLoading = true;

      let params = {
        userId: this.$Storage.get('employDetail_userId'),
        attachType: this.modalForm.type,
        url: this.imgOssPath
      }

      attachmentAddOrUpdateflowersApi(params).then(res => {
        this.modalVisible = false
        this.confirmLoading = false

        let { code, msg } = res.data

        if (code == 200) {
          this.$message.success(msg)
        } else if (code == 400) {
          this.$message.error(msg)
        }
      })



    },

    modalHandleCancel () {
      this.modalVisible = false;
    },

    selectOnchange (value) {
      this.modalForm.type = value
    },

    uploadHandleChange (e) {
      upLoadAliyun(e).then(res => {
        this.imgOssPath = res.filePath
      })
    }


  }
};
</script>

<style scoped leng="less">
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>